@using BlazorSortableList.DemoApp.Client.Models

<div class="container">
    <h1 class="title is-size-1 has-text-centered">Shared Lists</h1>
    <p class="mb-4">Shared lists are lists where items can be dragged from one list to the other and vice-versa. Providing the same "Group" string name for both lists is what links them together. Note that when an item is dragged into a different list, it assumes the visual style of that list. This is because Blazor controls the rendering of the list items.</p>

    <TabControl>
        <TabPage Title="Example">
            <div class="columns">
                <div class="column">
                    <SortableList Id="shared1" Group="sharedLists" Items="items1" Context="item" OnRemove="ListOneRemove">
                        <SortableItemTemplate>
                            <div class=" card has-border-dark has-background-white">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="shared2" Group="sharedLists" OnRemove="ListTwoRemove" Items="items2" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-background-white has-border-dark">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>            
        </TabPage>
        <TabPage Title="Code">
            <pre>@codeContent1</pre>
        </TabPage>
        <TabPage Title="Example V1.2">
            <div class="columns">
                <div class="column">
                    <SortableList Id="@ListId1" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class=" card has-border-dark has-background-white">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="@ListId2" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-background-white has-border-dark">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>                  
        </TabPage>
        <TabPage Title="Code V1.2">
            <pre>@codeContent2</pre>
        </TabPage>
        
    </TabControl>
</div>

@code {
    private const string ListId1 = "SharedListId1";
    private const string ListId2 = "SharedListId2";
    private const string GroupId = "CommonGroup";

    private string codeContent1 = $@"
    <SortableList Group=""sharedLists"" Items=""items1"" Context=""item"" OnRemove=""ListOneRemove"">
        <SortableItemTemplate>
            <div class="" card has-border has-background-white"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    <SortableList Group=""sharedLists"" OnRemove=""ListTwoRemove"" Items=""items2"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-background-white has-border"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>

    @code {{
        private void ListOneRemove((int oldIndex, int newIndex) indices)
        {{
            // get the item at the old index in list 1
            var item = items1[indices.oldIndex];

            // add it to the new index in list 2
            items2.Insert(indices.newIndex, item);

            // remove the item from the old index in list 1
            items1.Remove(items1[indices.oldIndex]);
        }}

        private void ListTwoRemove((int oldIndex, int newIndex) indices)
        {{
            // get the item at the old index in list 2
            var item = items2[indices.oldIndex];

            // add it to the new index in list 1
            items1.Insert(indices.newIndex, item);

            // remove the item from the old index in list 2
            items2.Remove(items2[indices.oldIndex]);
        }}
    }}
    ";

    private string codeContent2 = $@"
    <SortableList Id=""""@ListId1"""" GroupModel=""""@_group"""" Context=""""item"""">
        <SortableItemTemplate>
            <div class="""" card has-border-dark has-background-white"""">
                <p class=""""is-size-4 p-2 ml-4"""">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    <SortableList Id=""""@ListId2"""" GroupModel=""""@_group"""" Context=""""item"""">
        <SortableItemTemplate>
            <div class=""""card has-background-white has-border-dark"""">
                <p class=""""is-size-4 p-2 ml-4"""">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>    
    @code {{
        private const string ListId1 = ""SharedListId1"";
        private const string ListId2 = ""SharedListId2"";
        private const string GroupId = ""CommonGroup"";    
        public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item {{ Id = i, Name = $""Item {{i}}"" }}).ToList();

        public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item {{ Id = i, Name = $""Item {{i}}"" }}).ToList();

        SharedSortableListGroup _group;

        protected override async Task OnInitializedAsync()
        {{
            await base.OnInitializedAsync();
            _group = new SharedSortableListGroup(ListId1, ListId2, () => StateHasChanged());
            _group.AddModel(ListId1, new SortableListModel<Item>(items1) {{ Group = GroupId }});
            _group.AddModel(ListId2, new SortableListModel<Item>(items2) {{ Group = GroupId }});
        }}
    }}
    ";

    public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    SharedSortableListGroup _group;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        _group = new SharedSortableListGroup(() => StateHasChanged());
        _group.AddModel(ListId1, new SortableListModel<Item>(items1) { Group = GroupId });
        _group.AddModel(ListId2, new SortableListModel<Item>(items2) { Group = GroupId });
    }

    private void ListOneRemove((int oldIndex, int newIndex) indices)
    {
        // get the item at the old index in list 1
        var item = items1[indices.oldIndex];

        // add it to the new index in list 2
        items2.Insert(indices.newIndex, item);

        // remove the item from the old index in list 1
        items1.Remove(items1[indices.oldIndex]);
    }

    private void ListTwoRemove((int oldIndex, int newIndex) indices)
    {
        // get the item at the old index in list 2
        var item = items2[indices.oldIndex];

        // add it to the new index in list 1
        items1.Insert(indices.newIndex, item);

        // remove the item from the old index in list 2
        items2.Remove(items2[indices.oldIndex]);
    }
}
